<template>
  <div>
    <a-table
      :class="'my-index-table tytable1'"
      ref="table1"
      size="small"
      rowKey="id"
      bordered
      :columns="columns"
      :dataSource="dataSource1"
      :pagination="false"
      :scroll="{ x: 2751}"
    >
      <template slot="ellipsisText" slot-scope="text">
        <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
      </template>

      <template slot="dayWarnning" slot-scope="text, record">
        <a-icon type="bulb" theme="twoTone" style="font-size: 22px" :twoToneColor="getTipColor(record)" />
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '2号变压器',
          align: 'left',
          children: [
            {
              width: 100,
              dataIndex: 'yjje',
                title: (
                 <div class="headerDiv">
                  <div class="name">名称</div>
                  <div class="date">日期</div>
                </div>
                ),
            },
            {
              title: '2号变压器总表',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '二号变配电间备PD-AC',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品炸蒸单炸SPAP',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品预处理SPAP2',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品预处理SPAP3',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '五区食品包装SP-AP3',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区暖通4-TFAP1',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '五区暖通5-TFAP1',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '五区电梯5DT-AP',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '水泵房AP-GS',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区照明SP-1AL',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '导热油锅炉AP-GL2',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品预处理SPAP5',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品斩拌机',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '五区食品包装SPAP2',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区中控室KZAL',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品制冰机',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区消防风机APE4',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '五区消防风机APE5',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '消防泵房XB-APE',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '备用',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '五区食品工艺预留',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '四区食品斩拌机',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '水井联网',
              align: 'center',
              children: [
                {
                  title: '表数',
                  width:50,
                  dataIndex: 'water',
                },
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
            {
              title: '合计',
              align: 'center',
              children: [
                {
                  title: '用量',
                  width:50,
                  dataIndex: 'water',
                },
              ],
            },
          ],
        },

        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      dataSource1: [{
          yjje:"2021-08-08",
          water:0,
      }],
    }
  },
  mounted() {
     setTimeout(() => {
      let width = document.getElementsByClassName('ant-table-row-cell-break-word')[0].offsetWidth
      let height = document.getElementsByClassName('ant-table-row-cell-break-word')[0].offsetHeight
      var sinOfAngleX = height / width // 0.5
      let deg = (Math.atan(sinOfAngleX) * 180) / Math.PI
      document.getElementsByClassName('headerDiv')[0].style.width = width-16+"px"
      document.getElementsByClassName('headerDiv')[0].style.height = height-16+"px"
      document.getElementsByClassName('ant-table-row-cell-break-word')[0].style.background =
        'linear-gradient(' + deg.toFixed(0) + 'deg, transparent 49.5%, #ddd 49.5%, #ddd 50.5%, transparent 50.5%)'
    }, 200)
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-small > .ant-table-content > .ant-table-body{
  margin:0;
}
.headerDiv {
  position: relative;
  .name{
    position: absolute;
    right:0;
    top:0;
  }
  .date{
    position: absolute;
    left:0;
    bottom:0;
  }
}
</style>